<template>
  <el-table
    :data="list.filter(data => !search || data.area1.toLowerCase().includes(search.toLowerCase())||data.area2.toLowerCase().includes(search.toLowerCase()) || data.area3.toLowerCase().includes(search.toLowerCase()) || data.date.toLowerCase().includes(search.toLowerCase()) || data.dname.toLowerCase().includes(search.toLowerCase()) )"
    style="width: 1000px"
  >
    <el-table-column
      label="名称"
      prop="dname"
    >
    
      </el-table-column>
    <el-table-column
      label="日期"
      prop="date"
    >
      </el-table-column>
      <el-table-column
        label="市"
        prop="area1"
      >
        </el-table-column>
        <el-table-column
        label="区"
        prop="area2"
      >
        </el-table-column>
        <el-table-column
        label="社区"
        prop="area3"
      >
        </el-table-column>
        <el-table-column
        label="金额(元)"
        prop="money"
      >
        </el-table-column>
        <el-table-column align="right">
          <template
            slot="header"
            slot-scope="scope"
          >
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
            />
</template>
  <template slot-scope="scope">
    <el-button
    size="mini"
    @click="open()"
    >目标地址</el-button>
    <a href="http://localhost:8081/#/order"><el-button
      size="mini"
      type="danger"
      @click="handleDelete(scope.$index, scope.row)"
    >即刻下单</el-button>
    </a>
  </template>
  
</el-table-column>
</el-table>
  
</template>

<script>
export default {
  data() {
    return {
      tabledata: [],
      list:[],

      search: ""
    };
  },
  created() {
    this.query()
  },
  methods: {
    
    handleEdit(index, row) {
      console.log(index, row);
    },
    //获取订单表的信息
     query() {
      this.axios.get("http://localhost:3000/dingdan").then((response) => {
        this.list = response.data;
      });
    },
    //下单方法
    handleDelete(index, row) {
      // console.log(index, row);
      console.log(row.type);
      this.axios({
        method: "post",
        url: 'http://localhost:3000/received',
        data: {
          type: row.type,
          type1: row.type1,
          type2: row.type2,
          area1: row.area1,
          area2: row.area2,
          area3: row.area3,
          date: row.date,
          money:row.money,
          value1:row.value1,
          id:row.id
        }
      }).then(res => {
         this.axios
        .delete("http://localhost:3000/dingdan/" + row.id)
        .then((response) => {
          
        });
        this.query();
      });
    },
  
    gettabledata() {
      this.axios.get("http://localhost:3000/dingdan").then((a) => {
        this.tabledata = a.data;
        console.log(a)
      });
    },
    open() {
        this.$prompt('请输入地址', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          //inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '目标地址超出该宿递范围'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '目标地址是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      }
  }
};
</script>